<template>
	<up-navbar title="我的" bgColor="transparent" leftIcon> </up-navbar>
	<view class="mine-top" :style="{
		padding: `${bottom + 16}px 32rpx 28rpx`
	}">
		<view class="u-flex u-flex-between u-flex-items-center">
			<view class="u-flex u-flex-items-center" v-if="Object.keys(userInfo).length > 0 ">
				<!-- <image :src="userInfo.avatar" class="avatar" mode="aspectFill"></image> -->
				<up-image :src="userInfo.avatar" width="120rpx" height="120rpx" shape="circle"></up-image>
				<view class="u-m-l-20">
					<view class="f-s-16 f-w-b">{{ userInfo.nickName }}</view>
					<view class="u-m-t-8 f-s-12 u-info">{{ userInfo.dept?.deptName }}</view>
				</view>
			</view>
			<view v-else class="f-s-16 f-w-b">
				请登录
			</view>
			<!-- <view>
				<up-button text="切换身份" icon="" :customStyle="{
					width: '172rpx',
					height: '56rpx',
					background: 'transparent',
					border: '1rpx solid rgba(0,0,0,0.25)',
					borderRadius: '30rpx',
					fontSize: '28rpx',
					color: '#000'
				}" @click="change"></up-button>
			</view> -->
		</view>
		<view class="integral-box u-flex u-flex-between u-flex-items-center">
			<view class="u-flex u-flex-items-center">
				<image src="/static/mine/jifen.png" style="width: 56rpx;height: 56rpx;"></image>
				<view class="f-s-14 u-m-l-16">我的积分</view>
				<view class="f-s-16 f-w-b u-m-l-16">{{ userInfo.integral }}分</view>
			</view>
			<view>
				<up-button text="兑换好礼" icon="" :customStyle="{
					width: '172rpx',
					height: '56rpx',
					background: 'transparent',
					border: '1rpx solid rgba(255,255,255,0.6)',
					borderRadius: '30rpx',
					fontSize: '24rpx',
					color: '#fff'
				}" @click="change"></up-button>
			</view>
			<image class="_icon" src="/static/mine/jf-icon.png" mode="widthFix"></image>
		</view>
		<view class="_menu u-m-t-24">
			<!-- <view class="_menu_item" @click="edit">
				<view class="u-flex u-flex-items-center">
					<image class="menu_icon" src="/static/mine/edit.png"></image>
					<view class="f-s-16 u-m-l-20">编辑信息</view>
				</view>
				<up-icon name="arrow-right" color="#BFBFBF"></up-icon>
			</view> -->
			<view class="_menu_item" @click="change">
				<view class="u-flex u-flex-items-center">
					<image class="menu_icon" src="/static/mine/msg.png"></image>
					<view class="f-s-16 u-m-l-20">消息推送</view>
				</view>
				<up-icon name="arrow-right" color="#BFBFBF"></up-icon>
			</view>
			<view class="_menu_item" @click="change">
				<view class="u-flex u-flex-items-center">
					<image class="menu_icon" src="/static/mine/fank.png"></image>
					<view class="f-s-16 u-m-l-20">用户反馈</view>
				</view>
				<up-icon name="arrow-right" color="#BFBFBF"></up-icon>
			</view>
			<view class="_menu_item" @click="set">
				<view class="u-flex u-flex-items-center">
					<image class="menu_icon" src="/static/mine/set.png"></image>
					<view class="f-s-16 u-m-l-20">系统设置</view>
				</view>
				<up-icon name="arrow-right" color="#BFBFBF"></up-icon>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		toast
	} from '@/utils/common';
	import store from '@/store/index.js';
	import {
		onShow
	} from '@dcloudio/uni-app'

	// 微信小程序环境
	// #ifdef MP-WEIXIN
	const bottom = uni.getMenuButtonBoundingClientRect().bottom
	// #endif
	// 其他环境
	// #ifndef MP-WEIXIN
	const bottom = 20
	// #endif
	const userInfo = ref({})


	onShow(() => {
		// 设置用户信息
		store.dispatch('GetInfo').then(resp => {
			userInfo.value = resp.user
		})
	})

	const change = () => {
		toast('熬夜开发中...')
	}
	
	const edit = ()=>{
		uni.navigateTo({
			url: '/subPackages/mine/edit_menu'
		})
	}
	
	const set = ()=>{
		uni.navigateTo({
			url: '/subPackages/mine/edit_menu'
		})
	}
	
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.mine-top {
		height: 445rpx;
		background: linear-gradient(180deg, #C4E6FF 0%, #FFFFFF 100%);
		box-sizing: border-box;

		.integral-box {
			position: relative;
			margin-top: 40rpx;
			height: 130rpx;
			background: #086FFF;
			border-radius: 16rpx;
			color: #FFFFFF;
			padding: 0 24rpx;

			._icon {
				position: absolute;
				top: 0;
				right: 0;
				width: 211rpx;
				height: 130rpx;
			}
		}

		._menu_item {
			padding: 34rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.04);

			.menu_icon {
				width: 40rpx;
				height: 40rpx;
			}

		}
	}
</style>